// 用来统一管理路由
import { Suspense } from 'react'
import { Switch, Route, Redirect, } from "react-router-dom"
// 调用组件的时候，基于属性传递路由表进来，根据路由表，动态设定路由的匹配规则
const RouterView = (props) => {
    let { routes } = props
    return <Switch>
        {
            routes.map((item, index) => {
                let { redirect, from, to, exact, path, component: Component } = item
                let config = {}
                if (redirect) {
                    // 重定向匹配规则
                    config = { to }
                    if (from) {
                        config.from = from
                    }
                    if (exact) {
                        config.exact = true
                    }
                    return <Redirect key={index} {...config} />
                }
                // 正常匹配规则
                config = { path }
                if (exact) {
                    config.exact = true
                }
                return <Route key={index} {...config} render={(props) => {
                    // 统一基于RENDER函数做处理，当某个路由匹配，后期在这里可以做一些其他事情
                    // Suspense.fallback : 在异步加载的组件没有处理完成之前，先展示的Loading效果
                    return <Suspense fallback={<>正在处理中...</>}><Component {...props} /></Suspense>

                }} />
            })
        }
    </Switch>
}

export default RouterView
